<template>
  <section>
    <area-layout @TreeSelect="handlerTreeSelect">
      <template slot="title">
        <span class="title">
          {{ $route.meta.title }}
        </span>
       </template> 
      <template slot-scope="row">
        <template v-if="row.currentAreaId">
          <section class="roster-container">
            <!-- <section class="mode-select" v-if="row.currentAreaId.length">
              显示模式：
              <a-radio-group v-model="currentMode">
                <a-radio value="1"> 统计表 </a-radio>
                <a-radio value="2"> 明细表 </a-radio>
              </a-radio-group>
            </section> -->

            <Statistics
              ref="Statistics"
              :currentAreaId="row.currentAreaId"
              v-if="currentMode === '1'"
            />
            <template v-else>
              <!-- <MemberList
                ref="MemberList"
                :currentAreaId="row.currentAreaId"
                :currentAreaName="currentAreaName"
              /> -->
            </template>
          </section>
        </template>
      </template>
    </area-layout>
  </section>
</template>

<script lang="ts">
// 演示如何使用 this.$dialog 封装 modal 组件
import {
  Mixins,
  Component,
  Watch,
  Vue,
  Prop,
  Provide,
} from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'

import AreaTree from '@/components/src/AreaTree'
import AreaLayout from '@/layouts/AreaLayout.vue'
// import MemberList from './MemberList.vue'
import Statistics from './Detail.vue'
// import SelectImport from './SelectImport.vue'
import { userModule, PROJECT_IDS } from '@/store/modules/user'
import { cropMemberServices } from '@/common/services/crop-member'

@Component({
  components: {
    AreaTree,
    AreaLayout,
    // MemberList,
    Statistics,
    // SelectImport,
  },
})
export default class Farmers extends Mixins(EventsMixin) {
  public $refs: any

  public data = []
  public currentAreaId = ''

  @Provide()
  public currentAreaName = ''

  public currentMode = '1'

  get isLarge() {
    return userModule.isLarge
  }
  get currentUserArea() {
    return userModule.currentUserArea
  }

  get isPlant() {
    return userModule.isPlant
  }

  get isSecondPlant() {
    return userModule.isSecondPlant
  }

  get isThirdPlant() {
    return userModule.isThirdPlant
  }

  public handlerTreeSelect(data: any) {
    // 社级直接默认明细
    if (data.s_a_id.length === 14) {
      // this.currentMode = '2'
    } else {
      // this.currentMode = '1'
    }
    this.currentAreaId = data.s_a_id
    this.currentAreaName = data.s_a_nam
  }

  public handlerHelper() {
    this.events.trigger('show-helper')
  }

  public handlerUploadExecl() {
    this.$refs.MemberImport.handlerUploadExecl(true)
  }

  public currentAuth(auth: string) {
    let auths: string[] = []
    if (Array.isArray(auth)) {
      auths = auth
    } else if (auth) {
      auths = [auth]
    }
    if (auths.length === 0) return true
    // @ts-ignore
    return this.$route?.meta.permission.find((item) =>
      auths.includes(item.value)
    )
  }

  // 选择导入源
  public handlerSelectImport() {
    this.$refs.SelectImport.show()
  }

  public handlerSyncSuccess() {
    //
    this.currentMode === '1'
      ? this.$refs.Statistics.getData()
      : this.$refs.MemberList.getData()
  }

  // 下载
  public handlerDownload(link: string) {
    const a = document.createElement('a')
    a.href = link
    a.target = '_blank'
    a.click()
  }

  // 同步上一年数据
  public syncLoading = false
  public handlerSyncData(next: boolean) {
    const loading = this.$message.loading({
      content: '数据正在同步中。。。请稍后',
    })
    this.syncLoading = true
    cropMemberServices
      .syncThisYearData({
        s_a_id: this.currentAreaId,
        target: next ? `${userModule.currentYear + 1}` : undefined,
      })
      .then((_) => {
        this.$message.success('同步成功')
      })
      .finally(() => {
        loading()
        this.syncLoading = false
      })
  }

  public handlerSyncFirstData(step: number, year?: number) {
    const loading = this.$message.loading({
      content: '数据正在同步中。。。请稍后',
    })
    this.syncLoading = true
    cropMemberServices
      .syncThisYearFirstData({
        s_a_id: this.currentAreaId,
        target:
          step === 1
            ? PROJECT_IDS.FIRST
            : step === 2
            ? PROJECT_IDS.SECOND
            : undefined,
      })
      .then((_) => {
        this.$message.success('同步成功')
      })
      .finally(() => {
        loading()
        this.syncLoading = false
      })
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.member-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roster-container {
  // position: relative;
}
.mode-select {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 33;
}
.title {
  margin-right: 40px;
  font-weight: bold;
  display: inline-block;
  width: 220px;
}
.button-group {
  align-items: center;
  .button-group-title {
    font-size: 14px;
    // font-weight: bold;
    line-height: 32px;
  }
  // button {
  //   transition: all 0.4s;
  // }
  // button:hover {
  //   font-weight: bold;
  //   font-size: 16px;
  // }
}
</style>
